<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="cn">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="/js/jquery.js" type="text/javascript" charset="utf-8"></script>
    <script src="//at.alicdn.com/t/font_2896317_c93fdbvffkf.js"></script>
    <script src="/js/public.js"></script>
    <script src="/js/agora-rtm-sdk-1.4.3.js"></script>
    <script src="/js/wow.min.js"></script>
    <link rel="stylesheet" type="text/css" href="/css/public.css">
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.js" type="text/javascript"
        charset="UTF-8"></script>
    <script src="/js/dream-msg.min.js" type="text/javascript" charset="UTF-8"></script>
    <title>Document</title>
</head>

<body class="body">
    <header id="header"></header>
    <div class="header-second">
        <ul class="second-list">
            <li class="list-item active wow fadeInDown" data-index='0' data-wow-delay="0" data-wow-duration="1s">消息</li>
            <li class="list-item wow fadeInDown" data-index='1' data-wow-delay=".2s" data-wow-duration="1s">我的课程</li>
            <li class="list-item wow fadeInDown" data-index='2' data-wow-delay=".4s" data-wow-duration="1s">日历</li>
            <li class="list-item wow fadeInDown" data-index='3' data-wow-delay=".6s" data-wow-duration="1s">统计</li>
            <li class="list-item wow fadeInDown" data-index='4' data-wow-delay=".8s" data-wow-duration="1s">我的档案</li>
            <li class="list-item wow fadeInDown" data-index='5' data-wow-delay="1s" data-wow-duration="1s">设置</li>
        </ul>
        <div style="display: flex;align-items: center;position: relative;">
            <div class="data-set" style="display: flex;align-items: center;color:white">
                <i class="iconfont icon-yulan1"></i>
                <div class="data-open">档案公开</div>
                <i class="iconfont icon-xiangxia" style="transform: rotate(360deg);"></i>
            </div>
            <div class="data-dialog">
                <!-- <div class="data-dialog-list1">
                    <i class="iconfont icon-yulan" style="margin-right: 5px;"></i>
                    <span>预览档案</span>
                </div> -->
                <div class="data-dialog-list1">
                    <i class="iconfont icon-yanjing" style="color: #458C3B;margin-right: 5px"></i>
                    <span>档案未公开</span>
                </div>
            </div>

        </div>
    </div>

    <div id="mask" class="mask" style="z-index: -1;display: none;"></div>
    <div class="loading-wrap">
        <div class="loading">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>

    <input style="display: none;" type="file" name="" class="input" accept="image/*" id="">
    <div class="cropper-mask">
        <!-- <h3 class="title-box">裁剪图片</h3> -->
        <div class="box">
            <img id="image" src="">
        </div>
        <div class="btngroups">
            <button type="button" id="rotate">旋转</button>
            <button type="button" id="download">裁剪</button>
        </div>
        <div class="small">

        </div>
    </div>
</body>
<link rel="stylesheet" href="/css/cropper.css">
<script src="/js/cropper.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    $(".cropper-mask").hide();
    // 文件内容数组
    var fileImgList = [];

    function uploadImgMethod(t, i = 0) {

        let _this = t;

        if (i == 0) {
            var reviewimage = _this.parentElement.parentElement.nextElementSibling;
        } else {
            var reviewimage = _this.parentElement.parentElement.parentElement.parentElement.nextElementSibling;
        }

        if (i == 0) {

            uploadFile(_this, reviewimage, 1);

        } else {
            uploadFile(_this, reviewimage, 0);
        }
    }

    // 控制上传数量
    let codenum = 0;

    // 封装一个上传方法
    function uploadFile(_this, reviewimage, codes) {

        let file = _this.files[0];


        if (!/^image\/(jpg|png|jpeg)$/.test(file.type)) {

            Dreamer.warning("图片类型必须是jpg,png中的一种");
            return false;

        }
        if (((file.size).toFixed(2)) >= (3 * 1024 * 1024)) {

            Dreamer.warning("请上传小于3MB的图片");
            return false;
        }

        let reader = new FileReader();

        reader.readAsDataURL(file);

        reader.onload = async () => {

            if (codes == 1) {
                if (codenum < 2) {
                    codenum++;
                    let res = await upload('getSign', file);
                    let getimg = await getupload(file, res);
                    let image = new Image();
                    image.width = 180;
                    image.height = 80;
                    image.src = getimg.url;
                    image.className = 'imgclass';
                    reviewimage.append(image);
                } else {
                    Dreamer.warning('最多上传2张', 2000);
                }

            } else {
                let res = await upload('getSign', file);
                let getimg = await getupload(file, res);
                reviewimage.innerHTML = '';
                let image = new Image();
                image.width = 180;
                image.height = 80;
                image.src = getimg.url;
                image.className = 'imgclass';
                reviewimage.append(image);
                fileImgList.push(file);
            }
        }
        reader.onprogress = (e) => {
            let percent = e.total / e.loaded * 100 + '%';
            console.log(percent);
        }
        console.log(fileImgList);
    }



</script>
<style>
    @import url('./components/message/message.css');
    @import url('./components/class/class.css');
    @import url('./components/files/files.css');
    @import url('./components/calendar/calendar.css');
    @import url('./components/count/count.css');
    @import url('./components/setting/setting.css');



    body {
        width: 100vw;
        height: 100vh;
        display: flex;
        flex-direction: column;
    }

    html {
        overflow: -moz-hidden-unscrollable;
        height: 100%;
    }

    :root {
        --border-color: #F4F5F5;
        --active-white: #FFFFFF;
        --active-green: #5CBFC7;
        --active-gray: #F9F9F9;
    }

    .icon {
        width: 1em;
        height: 1em;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
    }

    .loading-wrap {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        user-select: none;
        height: 100%;
    }

    .loading {
        width: 80px;
        height: 40px;
        margin: 0 auto;
        margin-top: 100px;
    }

    .loading span {
        display: inline-block;
        width: 8px;
        height: 100%;
        border-radius: 4px;
        background: lightgreen;
        -webkit-animation: load 1s ease infinite;
    }

    @-webkit-keyframes load {

        0%,
        100% {
            height: 40px;
            background: lightgreen;
        }

        50% {
            height: 70px;
            margin: -15px 0;
            background: lightblue;
        }
    }

    .loading span:nth-child(2) {
        -webkit-animation-delay: 0.2s;
    }

    .loading span:nth-child(3) {
        -webkit-animation-delay: 0.4s;
    }

    .loading span:nth-child(4) {
        -webkit-animation-delay: 0.6s;
    }

    .loading span:nth-child(5) {
        -webkit-animation-delay: 0.8s;
    }

    .select {
        display: none;
        width: 79%;
        height: 140px;
        background-color: #ffffff;
        position: absolute;
        bottom: -140px;
        border-radius: 0px 0px 6px 6px;
        box-shadow: 0px 0px #e1e1e1 1px 0px;
        padding: 0 16px;
    }

    h3 {
        margin-top: 6px;
        font-size: 10px;
        color: #BDC3C9;
        margin-bottom: 6px;
    }


    .option:after {
        content: "";
        width: 14px;
        height: 8px;
        background: url(./static/arrow-down.png) no-repeat center;
        /*通过定位将图标放在合适的位置*/
        position: absolute;
        right: 20px;
        top: 41%;
        /*给自定义的图标实现点击下来功能*/
        pointer-events: none;
    }

    .body {
        width: 100vw;
        height: 100vh;
        display: flex;
        flex-direction: column;
        overflow-x: hidden;
        background: #EDEFF0;
        padding-bottom: 0px !important;
    }

    .con {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: rgba(237, 239, 240, 1);
    }

    .header-top {
        width: 100vw;
        height: 60px;
        /* padding: 0 1%; */
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: #fff;
    }

    .iconsize {
        font-size: 40px;
        color: #DDDddd;
    }

    .content {
        display: flex;
        align-items: center;
        height: 80%;
    }

    .icon {
        width: 120px;
        height: 100%;
        margin-left: 5%;
    }

    .title-bar {
        height: 80%;
        margin-left: 15px;
        display: flex;
        align-items: center;
    }

    .title-right-bar {
        height: 80%;
        border-left: 1px solid #d5d5d5;
        border-right: 1px solid #d5d5d5;
        margin-left: 15px;
        display: flex;
        align-items: center;
        font-size: 10px;
        color: #3C3C3C;
        position: relative;
    }

    .title-right-bar span {
        padding-left: 16px;
        color: #000000;
    }

    .title-bar span {
        padding: 0 20px;
        font-size: 10px;
        white-space: nowrap;
        color: #000000;
    }

    .span-first {
        height: 80%;
        padding: 0 24px;
        border-left: 1px solid #d5d5d5;
        border-right: 1px solid #d5d5d5;
    }

    .main-container {
        width: 40%;
        border-radius: 6rpx;
        border: 1px solid #dddddd;
        margin: 2% 0 3% 0;
        box-shadow: darkgrey 0px 0px 5px 0px
    }

    .header {
        width: 100%;
        background-color: #fff;
        padding: 5px 0 10px 0;
        border-bottom: 1px solid rgba(229, 229, 229, 1);
        text-align: center;
        position: relative;
        border-radius: 6rpx;
    }

    .header-second {
        width: 100vw;
        background-color: #384047;
        display: flex;
        box-sizing: border-box;
        align-items: center;
        padding-top: 12px;
        justify-content: space-between;
        padding-bottom: 12px;
    }

    .second-list {
        display: inline-flex;
        margin-left: 2%;
        color: var(--active-white);
        font-size: 10px;
    }

    .list-item {
        margin-left: 30px;
        cursor: pointer;
        position: relative;
    }

    .list-item:first-of-type {
        margin-left: 0px;
    }


    .active::after {
        content: '';
        border-top: 1px solid var(--active-white);
        position: absolute;
        left: 0px;
        bottom: 0;
        width: 100%;
        top: 19px;
        transition: 0.4s;
    }

    .content-left {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
    }

    .content-left-btn {
        width: 47px;
        background: #3BB3BD;
        outline: 0;
        cursor: pointer;
        font-size: 10px;
        border-radius: 2px;
        height: 17px;
        color: white;
        text-align: center;
        margin-left: 10px;
    }

    .left18 {
        margin-left: 18px;
    }

    .size10 {
        font-size: 10px;
    }

    .icon-xiangxia {
        margin-right: 24px;
        cursor: pointer;
        transition: .4s;

    }

    .data-open {
        margin-right: 7px;
    }

    .icon-yulan1 {
        margin-right: 8px;
    }

    .data-dialog {
        width: 116px;
        background: #4A5158;
        display: flex;
        position: absolute;
        top: 32px;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        border-radius: 0px 0px 3px 3px;
        left: -8px;
        z-index: 20;
        display: none;
    }

    .data-dialog div {
        cursor: pointer;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        z-index: 90;
        margin-top: 5px;
        margin-bottom: 5px;
    }
</style>

<script type="module">
    let isclick = false
    import { createTeacherMessage } from './components/message/message.js'
    import { createTeacherClassWrap } from './components/class/class.js'
    import { createMyFile } from './components/files/files.js'
    import { createCountWrap } from './components/count/count.js'
    import { createCalendar } from './components/calendar/calendar.js'
    import createUserSetting from './components/setting/setting.js'

    let onLoad = async () => {
        await createTeacherMessage()
        $('.loading-wrap').hide()
    }

    $('.icon-xiangxia')[0].addEventListener('click', (e) => {
        if (e.target.style.transform === 'rotate(360deg)') {
            e.target.style.transform = 'rotate(180deg)'
        } else {
            e.target.style.transform = 'rotate(360deg)'
        }
        $('.data-dialog').slideToggle()
    })

    $('.data-dialog-list1').each(function (index) {
        $(this).on('click', (e) => {
            let icon = this.children[0].className
            let text = this.children[1].innerText
            $('.data-set')[0].children[0].className = icon
            $('.data-set')[0].children[0].style.marginRight = this.children[0].style.marginRight
            $('.data-set')[0].children[0].style.color = this.children[0].style.color
            $('.data-set')[0].children[1].innerText = `${icon === 'iconfont icon-yulan' ? '档案公开' : '档案不公开'}`
        })
    })

    let initWrap = {
        init(type) {
            switch (type) {
                case 0: {
                    if ($('.message-wrap')[0]) {
                        $('.message-wrap')[0].remove()
                    }
                }; break;
                case 1: {
                    $('.component-wrap')[0] && $('.component-wrap')[0].remove()
                    $('.compone-class-history')[0] && $('.compone-class-history')[0].remove()
                    $('.component-wrap-file')[0] && $('.component-wrap-file')[0].remove()
                }; break;
                case 2: {
                    if ($('.calendar-wrap')[0]) {
                        $('.calendar-wrap')[0].remove()
                    }
                }; break;
                case 3: {
                    if ($('.count-wrap')[0]) {
                        $('.count-wrap')[0].remove()
                    }
                }; break;
                case 4: {
                    if ($('.component-wrap')[0]) {
                        $('.component-wrap')[0].remove()
                    }
                }; break;
                case 5: {
                    if ($('.component-wrap')[0]) {
                        $('.component-wrap')[0].remove()
                    }
                }; break;
            }
        },
        0: async function () {
            this.init(0)
            this.init(1)
            this.init(2)
            this.init(3)
            this.init(4)
            let res = await createTeacherMessage()
            return res
        },
        1: async function () {
            this.init(0)
            this.init(1)
            this.init(2)
            this.init(3)
            this.init(4)
            let res = await createTeacherClassWrap()
            return res
        },
        2: async function () {
            this.init(0)
            this.init(1)
            this.init(2)
            this.init(3)
            this.init(4)
            let res = await createCalendar()
            return res
        },
        3: async function () {
            this.init(0)
            this.init(1)
            this.init(2)
            this.init(3)
            this.init(4)
            let res = await createCountWrap()
            return res
        },
        4: async function () {
            this.init(0)
            this.init(1)
            this.init(2)
            this.init(3)
            this.init(4)
            let res = await createMyFile()
            return res
        },
        5: async function () {
            this.init(0)
            this.init(1)
            this.init(2)
            this.init(3)
            this.init(4)
            let res = await createUserSetting()
            return res
        },
    }


    $('.second-list')[0].addEventListener('click', async (e) => {
        if (e.target.nodeName.toLowerCase() === 'li') {
            if (isclick) return
            isclick = true
            $('.loading-wrap').show()
            Array.from($('.second-list')[0].children).forEach(item => {
                if (e.target.dataset.index === item.dataset.index) {
                    item.className = `list-item active`
                } else {
                    item.className = `list-item`
                }
            })
            await initWrap[e.target.dataset.index]()
            $('.loading-wrap').hide()
            isclick = false
        }
    })
    new WOW().init();
    productheader('header', 4, 2, 1);
    let tem = `<a href=" /views/teacher/teachers.html"><span data-i18n-text="AnnualAvg">寻找学生</span></a>`;
    $(".title-bar").empty().append(tem);
    $('.loading-wrap').hide();
    onLoad()
</script>

</html>